<template>
  <div class="search">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="black" />
    </van-sticky>
    <!-- 搜索 -->
    <form>
      <van-search
        v-model="keywords"
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
      />
    </form>
    <!-- 搜索历史 -->
    <div class="search-history">
      <van-cell title="搜索历史" size="large">
        <van-icon
          slot="right-icon"
          color="#ccc"
          @click="clear"
          class-prefix="icon-font-18 iconfont icon-laji"
          style="line-height: inherit;"
        />
      </van-cell>
      <!--搜索历史内容 -->
      <div class="history-content" v-if="!clearHistory">
        <div>法式复古裙子</div>
        <div>小高跟</div>
        <div>手提包</div>
        <div>书包 学生</div>
        <div>夏季防晒衣</div>
        <div>肥皂</div>
        <div>沐浴露</div>
        <div>洗手液 护手</div>
        <div>梳子 气垫梳</div>
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="hot-search">
      <van-cell title="大家正在搜" size="large">
        <van-icon
          size="20px"
          slot="right-icon"
          color="#f60"
          name="fire"
          style="line-height: inherit;"
        />
      </van-cell>
      <!-- 热门搜索内容 -->
      <div class="hot-search-content">
        <div>工装裤</div>
        <div>T恤男 宽松</div>
        <div>老爹鞋潮</div>
        <div>包包女2020新款</div>
        <div>阔腿裤 宽松</div>
        <div>玛丽珍鞋 法式</div>
        <div>公主裙</div>
        <div>简约通勤</div>
        <div>纸巾家用 批发</div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <like-goods></like-goods>
  </div>
</template>

<script>
import LikeGoods from "../../components/LikeGoods";
export default {
  components: {
    LikeGoods
  },
  data() {
    return {
      keywords: "",
      clearHistory: false
    };
  },
  methods: {
    black() {
      this.$router.go(-1);
    },
    onSearch() {
      console.log("我已经执行了");
    },
    // 清除历史搜索
    clear() {
      this.$dialog
        .confirm({
          message: "你确定要清除搜索全部历史吗？"
        })
        .then(() => {
          this.clearHistory = true;
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  background-color: #fff;
  .van-search__content{
      background-color: #eeeeee;
  }
  .search-history,
  .hot-search {
    .history-content,
    .hot-search-content {
      padding: 3px 10px;
      div {
        background-color: #eeeeee;
        padding: 3px 10px;
        margin: 0 10px;
        display: inline-block;
        border-radius: 20px;
        margin-bottom: 10px;
        color: #333;
      }
    }
  }
}
</style>